<script setup>
import {ref,reactive,onMounted} from 'vue'
import Header from '../components/Header.vue';
import { showToast } from 'vant';
import {useRouter} from 'vue-router'


const router = useRouter();
const value = ref('');
const finished = ref(false);
const data = reactive({
    searchList:[]
})
const onSearch = (val) => {
    if(val != null){
        var searchList = JSON.parse(localStorage.getItem('searchHistory'))
        if(searchList == null){
            var arr = []
            arr.push(val)
            localStorage.setItem('searchHistory',JSON.stringify(arr))
        }else{
            searchList.push(val)
            localStorage.setItem('searchHistory',JSON.stringify(searchList))
        }

    }else{
        alert("请重新输入")
    }

}
const onCancel = () => {
    router.push('/')
};
onMounted(()=>{
    data.searchList=JSON.parse(localStorage.getItem('searchHistory'))
})
</script>
<template>
    <div class="search">
        <Header></Header>
        <form action="/">
        <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    /> 
    </form>
    <van-list
    :finished="finished"
    finished-text="没有更多了"
    >
    <van-cell v-for="item in data.searchList" :key="item" :title="item" />
    </van-list>
    </div>
</template>
